<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片的滑动</title>

    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/layer.css" rel="stylesheet">
    <link href="../css/code.css" rel="stylesheet">

    <script src="../js/jQuery.js" type="text/javascript"></script>
    <script src="../js/bootstrap.js" type="text/javascript"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="../js/layui.js" type="text/javascript"></script>
    <script src="../js/layui.all.js" type="text/javascript"></script>
    <script src="../js/imgSlide.js" type="text/javascript"></script>

</head>
<body>
<h2 style="width: 100%;text-align: center;margin-top: 20px">图片移动</h2>
<div class="containsImg">
    <div class="container" style="width:36%;height: 400px;position: relative;margin: 1% 32%;border-radius: 5px  ">
        <img :src="upImg.paths" :title="upImg.name" class="img-rounded" style="width: 100%;height: 100%;">
    </div>
    <div class="container" style="width:36%;height: 90px;position: relative;margin: 0 32%;border-radius: 5px  ">
        <img src="../imgs/left.png" class="img-rounded" onclick="fns.toLeft()"  style="width: 6%;height: 100%;margin-right: 2%;float: left;">
        <img v-for="it in images" :src="it.paths" :title="it.name" onclick="fns.toUp(this)" onmouseover="fns.toUp(this)" class="img-rounded"
             style="width: 16%;height: 100%;margin-right: 1%;float: left;">
        <img src="../imgs/right.png" class="img-rounded" onclick="fns.toRight()" style="width: 6%;height: 100%;float: left;margin-left: 1%">
    </div>
</div>


</body>


</html>